<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: aqua;
            font-size: 20px;
        }
        *{
            padding: 0;
            list-style: none;
        }
        .frame {
            height: 600px;
            width: 800px;
            text-align: center;
            border-radius: 15px;
            background-color: wheat;
            margin: 0 auto;
        }
        .list1 {
            text-align: center;
        }
        .list1 >input {
            height: 35px;
            width: 350px;
            margin: 0 0 10px 0;
        }
        .list1 >button {
            color: white;
            background-color: skyblue;
            height: 40px;
            width: 100px;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        .list2 {
            text-align: center;
        }
        .list2 >input {
            height: 35px;
            width: 325px;
        }
        .list2 >button {
            color: white;
            background-color: skyblue;
            height: 40px;
            width: 125px;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        .list {
            margin: 20px 0 0 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .list3 {
            border: 1.5px solid white;
            width: 200px;
            height: 200px;
            border-radius: 0.25rem;
            
        }
        .list4 {
            border: 1.5px solid white;
            width: 200px;
            height: 200px;
            border-radius: 0.25rem;
            margin: 0 0 0 30px;
        }
        #start {
            background-color: skyblue;
            height: 40px;
            color: white;
            width: 125px;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            cursor: pointer;
            
        }
        #end {
            background-color: rgb(169，169，169);
            height: 40px;
            color: black;
            width: 125px;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        #imgs {
            height: 400px;
            width: 400px;
            top: -200px;
            left: 200px;
            display: none;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="frame">
        <h1>滚动抽奖游戏</h1>
        <div class="list1">
            <input type="text" id="input1" placeholder="请输入奖品">
            <button id="app1">+设置奖品</button>
        </div>
        <div class="list2">
            <input type="text" id="input2" placeholder="请输入参与人员">
            <button id="app2">+设置参与人员</button>
        </div>
        <div class="list">
            <div class="list3">
                <span>奖品列表</span>
                <ul id="app3"></ul>
            </div>
            <div class="list4">
                <span>参与人员</span>
                <ul id="app4"></ul>
            </div>
        </div>
        <div>
            <p id="text1">滚动中:无</p>
            <button id="start">开始抽奖</button>
            <button id="end">停止抽奖</button>
        </div>
        <img src="./烟花.gif" alt="" id="imgs">
    </div>
</body>
<script>
    const input1= document.getElementById('input1');
        const input2= document.getElementById('input2');
        const app1= document.getElementById('app1');
        const app2= document.getElementById('app2');
        const app3= document.getElementById('app3');
        const app4= document.getElementById('app4');
        const start=document.getElementById('start');
        const end= document.getElementById('end');
        const text1= document.getElementById('text1');
        const imgs=document.getElementById('imgs');
        let price1=[];
        let price2=[];
        app1.addEventListener('click',function(){
            const sum1=input1.value;
            if(sum1)
            {
                price1.push(sum1);
                const li1=document.createElement('li');
                li1.textContent=sum1;
                app3.appendChild(li1);
                input1.value='';
            }
        })
        app2.addEventListener('click',function(){
            const sum2=input2.value;
            if(sum2)
            {
                price2.push(sum2);
                const li2=document.createElement('li');
                li2.textContent=sum2;
                app4.appendChild(li2);
                input2.value='';
            }
        })
        start.addEventListener('click',function(){
            if(price1.length===0&&price2.length===0)
            {
                alert("请输入奖品和参与人员！！！");
                return;
            }
            if(price1.length===0)
            {
                alert("请输入奖品！！！");
                return;
            }
            if(price2.length===0)
            {
                alert("请输入参与人员！！！");
                return;
            }
            if(price1.length>0&&price2.length>0)
            {
                n=setInterval(function(){
                    const random1=Math.floor(Math.random()*price1.length);
                    const random2=Math.floor(Math.random()*price2.length);
                    text1.innerHTML=`<p>滚动中:获奖人:${price2[random2]},奖品:${price1[random1]}</p>`
                },250)
            }
        })
        end.addEventListener('click',function(){
            clearInterval(n);
            const ap1=app3.children;
            const ap2=app4.children;
            const random3=Math.floor(Math.random()*price1.length);
            const random4=Math.floor(Math.random()*price2.length);
            const price3=price1.splice(random3,1)[0];
            const price4=price2.splice(random4,1)[0];
            text1.innerHTML=`<p>恭喜${price4}获得了${price3}!!!</p>`
            app3.removeChild(ap1[random3]);
            app4.removeChild(ap2[random4]);
            imgs.style.display='block'
            setTimeout(function(){
                imgs.style.display='none'
            },2500)
        })
</script>
</html>